<template>
    <div class="panel-container" :class="{ collapsed: isCollapsed }">
      <!-- 标题 -->
      <div class="panel-header">
        <h3 class="panel-title">航线列表</h3>
        
      </div>
      
      <!-- 内容 -->
      <div class="panel-content">
        <div class="search-container">
            <!-- <div class="search-buttons">
                <el-button 
                    type="primary"
                    class="search-btn"
                    icon="CirclePlus"
                    @click="showDialog=true"
                    >
                    新建模型
                </el-button>
            </div> -->
            <div class="search-form">
                <!-- 时间范围 -->
                <div class="search-item">
                    <span class="demonstration">名称</span>
                    <el-input
                        v-model="searchParams.key"
                        class="responsive-input"
                        placeholder="请输入搜索内容"
                        :prefix-icon="Search"
                    />
                </div>
                <!-- 类型选择 -->
                <div class="search-item">
                    <span>航线操作类型</span>
                    <el-select v-model="searchParams.actionType" placeholder="请选择类型">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <!-- 收藏 -->
                <div class="search-item">
                    <span>是否收藏</span>
                    <el-select v-model="searchParams.favorited" placeholder="请选择状态">
                        <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <!-- 搜索和操作按钮 -->
            <div class="search-buttons">
                <el-button type="primary" icon="Search" class="search-btn" @click="fetchDeviceList">查询</el-button>
                <el-button type="primary" class="reset-btn" icon="Refresh" @click="handleReset">重置</el-button>
            </div>
        </div>
        <!-- 设备列表表格 -->
        <el-table
          :data="tableData"
          style="width: 100%; background: transparent !important;"
          class="transparent-table common-table"
          v-loading="loading"
          :header-cell-style="{ 
            background: 'transparent !important', 
            backgroundColor: 'transparent !important',
            border: 'none !important',
            color: 'rgba(255, 255, 255, 0.9) !important'
          }"
          :cell-style="{ 
            background: 'transparent !important', 
            backgroundColor: 'transparent !important',
            border: 'none !important',
            color: 'rgba(255, 255, 255, 0.9) !important'
          }"
          :row-class-name="tableRowClassName"
          
        >
        <!-- @row-click="handleSee" -->
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            prop="status"
            label="类型">
            <template #default="scope">
              <span>
                {{ getTypetext(scope.row.action_type)  || '--'}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="user_name"
            label="创建人">
          </el-table-column>
          <el-table-column
            prop="status"
            label="是否收藏">
            <template #default="scope">
              <span>
                {{ scope.row.favorited ? '已收藏' : '未收藏'}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="drone_model_key"
            label="无人机型号">
            <!-- <template #default="scope">
              <span :class="getStatusClass(scope.row.exec_status)">
                {{ getStatusText(scope.row.exec_status) }}
              </span>
            </template> -->
          </el-table-column>
          <!-- <el-table-column
            prop="workspace_name"
            label="所属组织">
          </el-table-column> -->
          <el-table-column
            prop="create_time"
            label="时间">
            <template #default="scope">
              {{ formatTime(scope.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              header-align="center"
              cell-class-name="footerCell"
              width="250">
              <template #default="scope">
                  <div class="action-buttons">
                      <span @click="HandleStartJob(scope.row)">编辑</span>
                      <span @click="handleDownModel(scope.row)">下载</span>
                      <span>删除</span>
                  </div>
              </template>
          </el-table-column>
          <!-- <el-table-column
            label="操作"
            width="120"
            align="center"
            header-align="center">
            <template #default="scope">
              <div class="action-buttons">
                <img 
                  src="@/assets/images/datamanage_device_download.png" 
                  alt="下载" 
                  class="action-btn download-btn"
                  @click="handleDownload(scope.row)"
                  title="下载"
                />
                <img 
                  src="@/assets/images/datamanage_device_delete.png" 
                  alt="删除" 
                  class="action-btn delete-btn"
                  @click="handleDelete(scope.row)"
                  title="删除"
                />
              </div>
            </template>
          </el-table-column> -->
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Math.max(total, 0)"
            layout="prev, pager, next"
            :hide-on-single-page="false"
            @current-change="handlePageChange"
          />
        </div>
      </div>
      <CommonDialog class="addDialog" v-model="showDialog" :background="bgImg" title="新增任务">
        <template #default>
          <el-form :model="addForm" label-width="auto" style="max-width: 600px">
            <el-form-item label="名称">
              <el-input v-model="addForm.name" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="类型">
              <el-select v-model="addForm.exec_status" placeholder="请选择状态">
                  <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  />
              </el-select>
            </el-form-item>
          </el-form>
        </template>
        <template #footer>
          <div class="search-buttons" style="margin: 0 auto;">
            <el-button type="primary"  class="reset-btn" @click="showDialog = false">取消</el-button>
            <el-button type="primary" class="search-btn"  @click="showDialog = false">执行</el-button>
          </div>
        </template>
        <!-- <slot name="footer">
          <div class="search-buttons" style="text-align: right;">
            <el-button type="primary"  class="search-btn" @click="showDialog = false">确认</el-button>
            <el-button type="primary" class="reset-btn"  @click="showDialog = false">取消</el-button>
          </div>
        </slot> -->
      </CommonDialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, reactive, watch } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import request from '@/utils/request'
  import { useUserStore } from '@/stores/modules/user'
  import {  formatTime } from '@/utils/index'
  import CommonDialog from '@/components/CommonDialog.vue'
  import bgImg from '@/assets/images/monitor_task_execution_dialog_bg.png'

  // 表单查询
  let searchParams = ref({
      key: null,
      actionType: null,
      favorited: null
  })
  const typeOptions = reactive([
    { value: 1, label: 'SPOT_CHECK'},
    // { value: 1, label: '三维模型'}
  ])
  const statusOptions = reactive([
    { value: true, label: '已收藏' },
    { value: false, label: '未收藏' },
  ])
  const tableRowClassName = ({
    row,
    rowIndex,
  }) => {
    if (rowIndex%2 == 1) {
      return 'warning-row'
    } else{
      return 'success-row'
    }
    return ''
  }
//   搜索重置
  const handleReset = () => {
      searchParams.value = {
        key: null,
        actionType: null,
        favorited: null
      }
      fetchDeviceList()
  }
 
  // 响应式数据
  let showDialog = ref(false)
  const activeTab = ref(2) // 当前激活的tab，默认为航线照片
  const userStore = useUserStore()
  const tableData = ref([])
  const loading = ref(false)
  const addForm = ref({
    name: '',
    exec_status: null
  })
  // 分页相关数据
  const currentPage = ref(1) // 当前页码
  const pageSize = ref(10) // 每页显示数量
  const total = ref(0) // 总数量
  
  
  // 获取设备列表
  const fetchDeviceList = async () => {
    try {
      loading.value = true
      // 从用户store获取workspace_id
      const workspaceId = userStore.user?.workspaceId
      
      if (!workspaceId) {
        ElMessage.error('未获取到工作空间ID，请重新登录')
        return
      }
      
      console.log('获取任务列表:', { workspaceId, activeTab: activeTab.value, page: currentPage.value, pageSize: pageSize.value })
      
      const response = await request({
        url: `/wayline/api/v1/workspaces/${workspaceId}/waylines`,
        method: 'get',
        params: {
          workspace_id:workspaceId,
          page: currentPage.value,
          pageSize: pageSize.value,
          order_by: 'update_time',
          desc:true,
          ...searchParams.value
        }
      })
      
      console.log('API响应数据:', response)
      
      // 处理响应数据结构
      let data = []
      if (response && response.code === 0) {
        if (response.data && response.data.list && Array.isArray(response.data.list)) {
          data = response.data.list
          // 获取分页信息
          if (response.data.pagination) {
            total.value = response.data.pagination.total || data.length
            currentPage.value = response.data.pagination.page || 1
            pageSize.value = response.data.pagination.page_size || 10
          } else {
            total.value = data.length
          }
        } else {
          console.warn('未找到预期的数据结构:', response)
          data = []
          total.value = 0
        }
      } else {
        console.error('API返回错误:', response?.message || '未知错误')
        ElMessage.error(response?.message || '获取任务列表失败')
        data = []
        total.value = 0
      }
      
      tableData.value = data
      
      console.log('分页信息:', { 
        total: total.value, 
        currentPage: currentPage.value, 
        pageSize: pageSize.value,
        dataLength: data.length 
      })
      
      // 如果没有数据，添加一些测试数据用于显示
      if (tableData.value.length === 0) {
        console.log('API返回空数据，使用测试数据')
        tableData.value = [
          
        ]
      }
      
      console.log('最终表格数据:', tableData.value)
    } catch (error) {
      console.error('获取任务列表失败:', error)
      ElMessage.error('获取任务列表失败')
      tableData.value = []
    } finally {
      loading.value = false
    }
  }
 
  
  // 编辑任务
  const handleEdit = (row) => {
    console.log('编辑任务:', row)
    ElMessage.info('编辑功能待实现')
  }
  
  // 下载任务数据
  const handleDownModel = async (row) => {
    try {
      // 从用户store获取workspace_id
      const workspaceId = userStore.user?.workspaceId
      
      if (!workspaceId) {
        ElMessage.error('未获取到工作空间ID，请重新登录')
        return
      }
      
      ElMessage.info('正在准备下载...')
      
      // 调用下载API
      const response = await request({
        url: `/manage/api/v1/models/${workspaceId}/download/${row.id}`,
        method: 'get',
        params: {
          workspace_id: workspaceId,
          id: row.id
        },
        responseType: 'blob' // 用于处理文件下载
      })
      
      // 创建下载链接
      if (response) {
        const blob = new Blob([response], { type: 'application/zip' })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = `${row.model_name}_媒体文件.zip`
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
        
        ElMessage.success('下载成功')
      } else {
        ElMessage.error('下载失败：未获取到文件数据')
      }
    } catch (error) {
      console.error('下载任务数据失败:', error)
      ElMessage.error('下载任务数据失败')
    }
  }
  
  // 删除任务
  const handleDelete = async (row) => {
    try {
      await ElMessageBox.confirm(
        `确定要删除任务 "${row.job_name}" 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      
      // 从用户store获取workspace_id
      const workspaceId = userStore.user?.workspaceId
      
      if (!workspaceId) {
        ElMessage.error('未获取到工作空间ID，请重新登录')
        return
      }
      
      // 调用删除API
      const response = await request({
        url: `/wayline/api/v1/workspaces/${workspaceId}/jobs/${row.job_id}`,
        method: 'delete'
      })
      
      console.log('删除API响应:', response)
      ElMessage.success('删除成功')
      
      // 重新获取列表
      await fetchDeviceList()
    } catch (error) {
      if (error !== 'cancel') {
        console.error('删除任务失败:', error)
        ElMessage.error('删除任务失败')
      }
    }
  }
  
  // 获取类型文本
  const getTypetext = (type) => {
    return typeOptions.find(v => v.value === type)?.label
  }
  
  // 查看任务详情
  const handleSee = (row) => {
    console.log('查看任务详情:', row)
    console.log('任务完整数据:', JSON.stringify(row, null, 2))
  
    // 构造设备数据，用于媒体文件查看
    const deviceData = {
      drone_name: row.dock_name,
      drone_sn: row.dock_sn,
      job_id: row.job_id,
      job_name: row.job_name,
      media_count: row.media_count,
      uploaded_count: row.uploaded_count,
      ...row
    }
    
    console.log('处理后的设备数据:', deviceData)
    
    // 发送设备选择事件给MediaFile组件
    const customEvent = new CustomEvent('device-selected-for-media', {
      detail: { 
        device: deviceData
      }
    })
    window.dispatchEvent(customEvent)
    console.log('发送设备选择事件给MediaFile组件:', deviceData)
    
    ElMessage.success(`正在加载任务 "${row.job_name}" 的媒体文件`)
  }
  
  // 处理分页当前页变化
  const handlePageChange = (val) => {
    currentPage.value = val
    fetchDeviceList()
  }
  
  
  // 组件挂载时获取数据
  onMounted(() => {
    fetchDeviceList()
  })
  </script>
  <style lang="scss">
  @import '@/style/utils.scss';
    .el-table--fit .el-table__inner-wrapper:before{
        width: 0;
    }
    .el-table tr{
      background-color: #094354 !important;
      margin-bottom: 10px !important;
    }
    .el-table tr.success-row{
      background-color: #0C2D36 !important;
    }
    .el-table tr.warning-row{
      background-color: #094354 !important;
    }
    // 全局样式覆盖 el-date-picker

    .el-select, .el-input{
        width: px2vw(200);
    }
    .dialog-body .el-select, .dialog-body .el-input{
      width: 100%;
    }
    // .dialog-body{
    //   min-height: 450px;
    // }
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-input__wrapper, .el-select__wrapper {
      background: rgba(255, 255, 255, 0) !important;
      border: px2vw(1) solid rgba(255, 255, 255, 0.2) !important;
      border-radius: px2vw(2) !important;
      box-shadow: none !important;
      height: px2vw(32) !important;
      min-height: px2vw(32) !important;
      width: 100% !important;
      font-size: px2vw(14);
    }

    .el-input__wrapper:hover, .el-select__wrapper:hover {
        border-color: rgba(0, 255, 244, 0.5) !important;
    }

    .el-input__wrapper.is-focus, .el-select__wrapper.is-focus {
        border-color: rgba(0, 255, 244, 1) !important;
        box-shadow: 0 0 0 px2vw(2) rgba(0, 255, 244, 0.2) !important;
    }

    .el-input__inner, .el-select__input-wrapper {
        height: px2vw(30) !important;
        line-height: px2vw(30) !important;
        color: rgba(255, 255, 255, 1) !important;
        background: transparent !important;
        font-size: px2vw(14) !important;
    }

    .el-input__inner::placeholder,.el-select__input-wrapper::placeholder  {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
  </style>
  <style lang="scss" scoped>
  // 样式已在主布局中导入，此处移除避免重复
  @import '@/style/utils.scss';
  .search-btn {
    min-width: 70px;
    height: 32px;
    padding: 0 16px;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
    border: 2px solid rgba(20, 109, 142, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.3s;
  
    &:hover:not(:disabled) {
        opacity: 0.9;
    }
    
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
  }
  
  .reset-btn {
    min-width: 70px;
    height: 32px;
    padding: 0 16px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(0, 255, 244, 0.5);
    color: rgba(0, 255, 244, 1);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 12px;
    &:hover:not(:disabled) {
        background: rgba(0, 255, 244, 0.1);
        border-color: rgba(0, 255, 244, 0.8);
    }
    
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
  }
  .panel-container {
    position: relative;
    width: 100%;
    height: 903px;
    background: url('@/assets/images/edit_airline_bg.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    transition: transform 0.3s ease, width 0.3s ease;
    
    // 折叠状态
    &.collapsed {
      transform: translateX(-541px); // 只露出收起按钮部分
      
      .panel-header,
      .panel-content {
        opacity: 0;
        pointer-events: none;
      }
    }
    
    .panel-header {
      width: 100%;
      height: 38px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 30px;
      padding: 0 16px;
      box-sizing: border-box;
      transition: opacity 0.3s ease;
      
      .panel-title {
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 2px;
        line-height: 18px;
        background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      }
  
  
    }
    
    .panel-content {
      flex: 1;
      width: 100%;
      max-height: 865px;
      overflow-y: auto;
      padding: 30px 16px;
      transition: opacity 0.3s ease;
      .search-container{
        display: flex;
        align-items: center;
        margin-bottom: px2vw(20);
        .search-form{
            display: flex;
            margin: 0 40px;
        }
        .search-item{
            display: flex;
            align-items: center;
            margin-right: px2vw(20);
            span{
                // margin-right: 8px;
                font-size: 12px;
                color:rgb(0, 255, 244);
                max-width: px2vw(80);
                margin-right: 10px;
            } 
        }
      }
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 5px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 2.5px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2.5px;
        transition: all 0.3s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.5);
        }
      }
      
      // Firefox 滚动条样式
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
  
    // 收起按钮
    .fold-btn {
      position: absolute;
      top: 50%;
      right: -26px;
      z-index: 2;
      transform: translateY(-50%);
      width: 26px;
      height: 81px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        .fold-btn-to-left-icon {
          transform: translate(-50%, -50%) scale(1.2);
          
          &.rotated {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
          }
        }
      }
      .fold-btn-bg {
        width: 100%;
        height: 100%;
      }
      .fold-btn-to-left-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%, -50%);
        width: 14px;
        height: 14px;
        transition: transform 0.3s ease;
        
        // 折叠状态时旋转180度
        &.rotated {
          transform: translate(-50%, -50%) rotate(180deg);
        }
      }
    }
  }
  
  /* 无边框且完全透明的表格样式 */
  .transparent-table {
  
    ::v-deep {
      /* 完全重置所有CSS变量并设置透明度 */
      .el-table {
        --el-table-border-color: transparent !important;
        --el-table-border: none !important;
        --el-table-text-color: inherit !important;
        --el-table-header-text-color: inherit !important;
        --el-table-row-hover-bg-color: transparent !important;
        --el-table-current-row-bg-color: transparent !important;
        --el-table-header-bg-color: transparent !important;
        --el-table-tr-bg-color: transparent !important;
        --el-table-fixed-box-shadow: none !important;
        --el-table-bg-color: transparent !important;
  
        --el-table-expanded-cell-bg-color: transparent !important;
        --el-table-fixed-left-column: none !important;
        --el-table-fixed-right-column: none !important;
        background-color: transparent ;
        background: transparent ;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
      }
  
      // /* 超级强力的表头透明度覆盖 */
      // .el-table th,
      // .el-table thead th,
      // .el-table__header th,
      // .el-table__header .el-table__cell,
      // .el-table__header-wrapper .el-table__cell,
      // .el-table .el-table__header .el-table__cell,
      // .el-table thead .el-table__cell {
      //   background-color: transparent !important;
      //   background: transparent !important;
      //   background-image: none !important;
      //   border: none !important;
      //   box-shadow: none !important;
      // }
  
      /* 1. 移除表格所有边框 */
      .el-table,
      .el-table__header-wrapper,
      .el-table__body-wrapper,
      .el-table__cell,
      .el-table__row,
      .el-table--border,
      .el-table--border th,
      .el-table--border td,
      .el-table__empty-block,
      .el-table__body,
      .el-table__header,
      .el-table__fixed-header-wrapper,
      .el-table__fixed-body-wrapper,
      .el-table__fixed,
      .el-table__fixed-right,
      .el-table__fixed-left,
      .el-table__fixed-right-patch,
      .el-table__fixed-header-wrapper,
      .el-table__fixed-body-wrapper,
      .el-table__fixed-footer-wrapper {
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
        border-collapse: separate !important;
        background-color: transparent ;
        outline: none !important;
        box-shadow: none !important;
      }
  
      /* 2. 移除表格默认背景色并确保透明 */
      // .el-table,
      // .el-table th,
      // .el-table td,
      // .el-table__body,
      // .el-table__header {
      //   background-color: transparent !important;
      //   background: transparent !important;
      //   opacity: 1 !important;
      // }
  
      /* 3. 表头样式定制 - 完全透明背景 */
      .el-table__header {
        background: transparent !important;
        
        .el-table__cell {
          background-color: transparent !important;
          background: transparent !important;
          color: rgba(255, 255, 255, 0.9) !important;
          border: none !important;
          border-right: none !important;
          border-bottom: none !important;
          border-left: none !important;
          border-top: none !important;
        }
      }
  
      /* 强制覆盖表头样式 - 使用更高权重选择器 */
      // .el-table__header-wrapper .el-table__header .el-table__cell,
      // .el-table thead .el-table__cell,
      // .el-table .el-table__header-wrapper .el-table__cell,
      // .el-table th.el-table__cell {
      //   background-color: transparent !important;
      //   background: transparent !important;
      //   border: none !important;
      // }
  
      // /* 4. 表格行样式定制 - 增强透明度 */
      // .el-table__body {
      //   background: transparent !important;
        
      //   tr {
          
      //     td {
      //       background-color: transparent !important;
      //       color: rgba(255, 255, 255, 0.9) !important;
      //       border: none !important;
      //       border-right: none !important;
      //       border-bottom: none !important;
      //       border-left: none !important;
      //       border-top: none !important;
      //     }
  
      //     &:nth-child(even) {
      //       background-color: rgba(5, 173, 187, 0.08) !important;
      //     }
  
      //     &:hover {
      //       background-color: rgba(10, 60, 72, 0.3) !important;
      //     }
      //   }
      // }
  
      /* 5. 移除默认的内边距影响 */
      .el-table__cell {
        padding: 6px 0 !important;
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
      }
  
      // /* 终极表头透明度覆盖 - 最高权重 */
      // .transparent-table .el-table__header .el-table__cell,
      // .transparent-table .el-table thead .el-table__cell,
      // .transparent-table th,
      // .transparent-table thead th,
      // .transparent-table .el-table__header-wrapper th,
      // .transparent-table .el-table__header-wrapper .el-table__cell {
      //   background-color: transparent !important;
      //   background: transparent !important;
      //   background-image: none !important;
      //   border: none !important;
      //   box-shadow: none !important;
      // }
  
      /* 6. 移除表格外层的所有边框和轮廓 */
      .el-table::before,
      .el-table::after {
        display: none !important;
      }
  
      /* 7. 确保表格容器也没有边框 */
      .el-table__body-wrapper,
      .el-table__header-wrapper {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
      }
  
      /* 8. 移除所有可能的边框线 */
      .el-table__border-line {
        display: none !important;
      }
  
      /* 9. 移除表格的默认边框样式 */
      .el-table--border::after,
      .el-table--border::before {
        display: none !important;
      }
  
      /* 10. 确保所有表格元素都没有边框 */
      .el-table * {
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
      }
  
      /* 11. 移除表格的默认边框类 */
      .el-table--border {
        border: none !important;
      }
  
      /* 12. 确保表格行和单元格完全没有边框 */
      .el-table__row,
      .el-table__cell,
      .el-table__header .el-table__cell,
      .el-table__body .el-table__cell {
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-top: none !important;
      }
  
      // /* 13. 强制表头完全透明 - 最高优先级 */
      // .transparent-table thead,
      // .transparent-table .el-table__header,
      // .transparent-table .el-table__header-wrapper,
      // .transparent-table .el-table__header-wrapper .el-table__header,
      // .transparent-table .el-table__header-wrapper .el-table__header .el-table__cell,
      // .transparent-table thead tr,
      // .transparent-table thead tr th,
      // .transparent-table thead tr th.el-table__cell {
      //   background: transparent !important;
      //   background-color: transparent !important;
      //   background-image: none !important;
      //   opacity: 1 !important;
      // }
  
      // /* 14. 强制所有表格行透明 - 覆盖任何默认样式 */
      // .transparent-table .el-table tr,
      // .transparent-table .el-table__row,
      // .transparent-table .el-table tbody tr,
      // .transparent-table .el-table__body tr {
      //   background: rgba(5, 140, 187, 0.3) !important;
      //   background-color: rgba(5, 140, 187, 0.3) !important;
      //   cursor: pointer !important;
      // }
  
      /* 15. 移除按钮的白色边框 */
      .el-button {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
      }
  
      /* 14. 移除加载状态的白色边框 */
      .el-loading-mask {
        border: none !important;
        outline: none !important;
        background-color: rgba(0,0,0,.5) !important;
      }
  
      /* 15. 移除表格容器的所有边框 */
      .el-table__inner-wrapper {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
      }
    }
  }
  
  /* 任务状态样式 */
  .status-pending {
    color: #909399 !important;
    font-weight: 500;
  }
  
  .status-running {
    color: #409EFF !important;
    font-weight: 500;
  }
  
  .status-paused {
    color: #E6A23C !important;
    font-weight: 500;
  }
  
  .status-completed {
    color: #67C23A !important;
    font-weight: 500;
  }
  
  .status-cancelled {
    color: #F56C6C !important;
    font-weight: 500;
  }
  
  .status-failed {
    color: #F56C6C !important;
    font-weight: 500;
  }
  
  .status-unknown {
    color: #909399 !important;
    font-weight: 500;
  }
  
  /* 操作按钮样式 */
  .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    color: #BFA516;
    cursor: pointer;
  }
  
  .action-btn {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    object-fit: contain;
    
    &:hover {
      transform: scale(1.2);
      filter: brightness(1.2);
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
  
  .download-btn:hover {
    filter: brightness(1.2) saturate(1.2);
  }
  
  .delete-btn:hover {
    filter: brightness(1.2) saturate(1.2);
  }
  
  /* 分页样式 */
  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 60px; // 确保有最小高度
    
    :deep(.el-pagination) {
      --el-pagination-font-size: 12px;
      --el-pagination-bg-color: transparent;
      --el-pagination-text-color: rgba(255, 255, 255, 0.8);
      --el-pagination-border-radius: 4px;
      --el-pagination-button-color: rgba(255, 255, 255, 0.6);
      --el-pagination-button-bg-color: rgba(255, 255, 255, 0.1);
      --el-pagination-button-disabled-color: rgba(255, 255, 255, 0.3);
      --el-pagination-button-disabled-bg-color: transparent;
      --el-pagination-hover-color: rgba(0, 255, 244, 1);
      --el-pagination-hover-bg-color: rgba(0, 255, 244, 0.2);
      
      .el-pager li {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        &:hover {
          background: rgba(0, 255, 244, 0.2);
          color: rgba(0, 255, 244, 1);
        }
        
        &.is-active {
          background: rgba(0, 255, 244, 0.8);
          color: #ffffff;
        }
      }
      
      .btn-prev,
      .btn-next {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
        
        &:hover {
          background: rgba(0, 255, 244, 0.2);
          color: rgba(0, 255, 244, 1);
        }
      }
      
      .el-pagination__total,
      .el-pagination__jump {
        color: rgba(255, 255, 255, 0.8);
      }
      
      .el-select .el-input {
        --el-input-bg-color: rgba(255, 255, 255, 0.1);
        --el-input-border-color: rgba(255, 255, 255, 0.2);
        --el-input-text-color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  
  </style> 